<template>
  <div>
    <!-- 补充表格搜索条件 -->
    <slot name="searchCri"></slot>
    <!-- end -->
    <!-- 补充表格其他操作 -->
    <slot name="tableAct"></slot>
    <!-- end -->
    <a-table
      :columns="this.columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :rowSelection="rowSelection"
      :rowKey="rowKey"
      @change="tableChange"
      bordered
    >
      <span slot="xh" slot-scope="text, record, index">{{index+1}}</span>
      <!-- 补充表格每列操作 -->
      <slot
        name="tableRowAct"
        slot="action"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      ></slot>
      <!-- end -->
      <slot
        name="statusSwitch"
        slot="status"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      ></slot>
      <slot
        name="roleName"
        slot="role"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      ></slot>
     <slot
        name="departmentName"
        slot="department"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      ></slot>
      <slot
        name="security"
        slot="securityName"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      >
        <span>{{record.security==1?"专用":"普通"}}</span>
      </slot>
      <slot
        name="areaCodeName"
        slot="areaCode"
        slot-scope="text, record, index"
        :text="text"
        :record="record"
        :index="index"
      ></slot>
    </a-table>
  </div>
</template>

<script>
import req from '@/../static/js/http.js';

// 表格查询参数
let tableParams = {
  results: '', // 一页数据条数
  page: '', // 当前页
  sortField: '', // 排序的列名
  sortOrder: '' // 升序还是降序
}
/*
 * @columns : 表格表头
 * @rowKeyName ： 每行数据的唯一key的名称
 * @params ： 其他查询参数
 * @url ： 数据获取路径
 * @type ： ajax获取方式：get or post
 * @size ： 分页设置每一页数据条数
 * @sizeOptions ： 分页设置可选项数组，每页显示多少条
 * @selectedKeys ： 选中行的key值
 */
export default {
  name: 'unitTable',
  props: [
    'columns',
    'rowKeyName',
    'params',
    'url',
    'type',
    'size',
    'sizeOptions',
    'selectType',
    'selectedKeys'
  ],
  data () {
    return {
      rowKey: record => record[this.rowKeyName],
      dataSource: [], // 表格数据
      /* 通用设置 */
      // 表格是checkbox还是radio
      rowSelection: this.selectType == null?null : {
        type: this.selectType,   //表格是checkbox还是radio
        selectedRowKeys: this.selectedKeys || [], // 选中行的key当props传值过来时，默认选中
        selectedRows: [], // 选中行的内容
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
          this.rowSelection.selectedRows = selectedRows
          /*参数传递到父组件，方便做批量操作*/
          this.$emit('onSelect', selectedRowKeys, selectedRows)
        }
      },
      // 表格分页设置
      pagination: {
        pageSize: this.size,
        current: 1,
        total: 0,
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, // 是否可以快速跳转至某页
        showSizeChanger: true, // 是否可以改变pageSize
        pageSizeOptions: this.sizeOptions,
        showTotal: total => `共 ${total} 条数据`,
        onShowSizeChange: (current, pagesize) => {
          this.pagination.current = current
          this.pagination.pageSize = pagesize
        }
      }
    }
  },
  methods: {
    /* 获取动态表格数据 */
    fetch (newPage) {
      const self = this
      Object.assign(tableParams, self.params)
      req(
        tableParams,
        function (res) {
          const pagination = self.pagination
          pagination.total = res.totals
          if (newPage) tableParams.page = newPage
          pagination.current = tableParams.page || 1
          self.dataSource = res.list
          self.pagination = pagination
        },
        self.url,
        self.type
      )
    },
    /* 翻页，列搜索，排序事件 */
    tableChange (pagination, filters, sorter) {
      this.pagination = pagination

      tableParams.results = pagination.pageSize
      tableParams.page = pagination.current
      tableParams.sortField = sorter.field || '';
      tableParams.sortOrder = sorter.order || '';
      this.fetch()
    }
  },
  mounted () {
    tableParams.results = this.pagination.pageSize
    tableParams.page = this.pagination.current
    this.fetch()
  },
  // 实例销毁后清空参数
  destroyed () {
    tableParams = {
      results: '', // 一页数据条数
      page: '', // 当前页
      sortField: '', // 排序的列名
      sortOrder: '' // 升序还是降序
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-row,
.ant-table-wrapper,
.actionBtn {
  width: 94%;
  margin: 15px 3%;
}
</style>
